<template>
  <div class="userlist">
    <h1>好友列表</h1>
    <ul>
      <li v-for="(item, index) in userlist" @click="chooseUser(index)" :key="index">
        <img :src="item.headerimg" />
        <h3>{{ item.username }}</h3>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["userlist"],
  methods: {
      chooseUser:function(index){
          this.$emit('chooseuser', index)
      }
  }
};
</script>

<style>
    .userlist{
        width: 300px;
        height: 700px;
        background: skyblue;
    }
    .userlist ul li{
        display: flex;
    }
    .userlist ul li img{
        width: 80px;
        height: 80px;
    }
</style>
